import { PluginOption } from "vite";
import { createHtmlPlugin } from "vite-plugin-html";//Vite 插件，可以帮助你定制和增强生成的 HTML 文件。通过这个插件，你可以注入环境变量、自定义 HTML 模板或执行其它 HTML 相关的任务。
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import eslintPlugin from "vite-plugin-eslint";//集成 ESLint 静态代码检查工具
import viteCompression from "vite-plugin-compression";//构建过程中对静态资源文件进行压缩。通过使用这个插件，可以有效地减小静态资源文件的体积，从而加快页面加载速度，并降低网络传输所需的带宽消耗。
import vueSetupExtend from "unplugin-vue-setup-extend-plus/vite";
//Vite、Webpack 及其他构建工具的插件，它提供了在 Vue 3 <script setup> 语法中使用 name 和 extends 选项的功能。
//Vue 3 引入了 < script setup > 作为一种更加声明式的组件编写方式，这种方式默认不支持 name 和 extends 选项，但这个插件提供了这两个选项的支持。
import AutoImport from "unplugin-auto-import/vite"; // 自动导入
// import { visualizer } from "rollup-plugin-visualizer";
// 配置qiankun
import qiankun from "vite-plugin-qiankun";

const packName = require("../package").name;

/**
 * 创建 vite 插件
 * @param
 */
export const createVitePlugins = (): (PluginOption | PluginOption[])[] => {
  return [
    vue(),
    // vue 可以使用 jsx/tsx 语法
    vueJsx(),
    // esLint 报错信息显示在浏览器界面上
    eslintPlugin(),
    // name 可以写在 script 标签上
    vueSetupExtend({}),
    AutoImport({
      imports: ["vue", "vue-router", "pinia"], // 自动导入vue、vue-router、pinia相关API
      dts: "src/auto-import.d.ts" // 生成 `auto-import.d.ts` 全局声明
    }),
    // 配置qiankun
    qiankun(`${packName}`, {
      useDevMode: true
    }),
    // 创建打包压缩配置
    viteCompression({
      verbose: true,
      disable: false, // 不禁用压缩
      deleteOriginFile: false, // 压缩后是否删除原文件
      threshold: 10240, // 压缩前最小文件大小
      algorithm: "gzip", // 压缩算法
      ext: ".gz" // 文件类型
    }),
 
    // 注入变量到 html 文件
    createHtmlPlugin({
      inject: {
        data: { title: "Wocwin-Admin" }
      }
    })
    // visualizer({
    //   open: true, //注意这里要设置为true，否则无效
    //   gzipSize: true,
    //   brotliSize: true
    // })
  ];
};